<template>
	<view class="ep-picker-box">
		<!-- <button @tap.stop="show=false" style="z-index: 10;">萨克基督教</button> -->
		<!-- 蒙版区域 开始 -->
		<view class="ep-mask-box" v-show="show" @tap="show=false"></view>
		<!-- 蒙版区域 开始 -->
		<view v-show="show" class="ep-picker-content-wrap">
			<view class="ep-picker-content" style="display: flex;">
				<!-- 展示下拉项列表 开始 -->
				<view v-for="(item,index) in options" :key="index"
					:class="['option-item',item.value==value ? 'active':'']"
					>
					<view class="btn" style="z-index: 10;">{{item.value}}</view>
					</view>
				<!-- 展示下拉项列表 结束 -->

				<!-- 下拉列表为空 开始 -->
				<!-- <view v-if="options.length==0" class="option-no-data">无数据</view> -->
				<!-- 下拉列表为空 结束 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				disabled: false,
				options: [{
					value: "1",
					label: "今天"
				}, {
					value: "2",
					label: "三日内"
				}, {
					value: "3",
					label: "一周内"
				}, {
					value: "4",
					label: "全部",
					// disabled: true
				}],
				value:'1'
			}
		},
		methods: {

		}
	}
</script>


<style scoped lang="scss">
	.ep-mask-box {
		position: fixed;
		z-index: 9;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0 ,0.5);
	}
	.ep-picker-content{
		// width: 375px;
		// height: 56px;
		display: flex;
		    align-items: center;
		    justify-content: space-evenly;
		background: #FFFFFF;
		padding: 14px 0px;
		box-shadow: 0px 2px 8px 0px rgba(159, 175, 175, 0.81);
		.btn{
			// width: 76px;
			// height: 28px;
			border-radius: 2px;
			border: 1px solid rgba(136, 217, 209, 0.5);
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #88D9D1;
			line-height: 24px;
			text-align: center;
			padding: 0 12px;
			// margin:  0 10px;
		}
	}
	v-deep .uni-scroll-view{
		display: flex;
	}
</style>
